<template>
    <el-dropdown trigger="click" @command="handleSetSize">
        <div>
            <svg-icon class-name="size-icon" icon-class="size" />
        </div>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
                {{
                item.label }}
            </el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>

<script>
    export default {
        data() {
            return {
                sizeOptions: [
                    { label: 'Default', value: 'default' },
                    { label: 'Medium', value: 'medium' },
                    { label: 'Small', value: 'small' },
                    { label: 'Mini', value: 'mini' }
                ]
            }
        },
        computed: {
            size() {
                return this.$store.getters.size
            }
        },
        methods: {
            handleSetSize(size) {
                this.$ELEMENT.size = size
                this.$store.dispatch('app/setSize', size)
                this.refreshView()
                this.$message({
                    message: 'Switch Size Success',
                    type: 'success'
                })
            },
            refreshView() {
                // In order to make the cached page re-rendered
                this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
                const { fullPath } = this.$route
                this.$nextTick(() => {
                    this.$router.replace({
                        path: '/redirect' + fullPath
                    })
                })
            }
        }
    }
</script>